import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from "../ui/dialog";
import { Button } from "../ui/button";
import { BrainCog, Loader } from "lucide-react";
import { Reflections } from "@/types";
import { ConfirmClearDialog } from "./ConfirmClearDialog";
import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";

export interface ReflectionsProps {
  isLoadingReflections: boolean;
  reflections: (Reflections & { updatedAt: Date }) | undefined;
  handleDeleteReflections: () => Promise<boolean>;
  handleGetReflections: () => Promise<void>;
}

function NoReflections(props: Pick<ReflectionsProps, "handleGetReflections">) {
  return (
    <div className="flex flex-col items-center mt-6 mb-[-24px] gap-3">
      <p>No reflections have been generated yet.</p>
      <p className="text-sm text-gray-500">
        Reflections generate after 30s of inactivity. If none appear, try again
        later.
      </p>
      <Button
        onClick={props.handleGetReflections}
        variant="secondary"
        size="sm"
      >
        Search for reflections
      </Button>
    </div>
  );
}

{
  /* <div
          onClick={() => setOpen(true)}
          className="ml-auto bg-white hover:bg-gray-50 text-black border border-gray-300 px-4 py-2 rounded-md shadow-sm transition-colors duration-200 cursor-pointer flex items-center space-x-2"
        >
          <p className="text-sm font-light">Reflections</p>
        </div> */
}

export function ReflectionsDialog(props: ReflectionsProps) {
  const {
    isLoadingReflections,
    reflections,
    handleGetReflections,
    handleDeleteReflections,
  } = props;
  const [open, setOpen] = useState(false);

  const handleDelete = async () => {
    setOpen(false);
    return await handleDeleteReflections();
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <TooltipIconButton
          tooltip="Reflections"
          variant="ghost"
          className="w-fit h-fit p-2"
          onClick={() => setOpen(true)}
        >
          <BrainCog className="w-6 h-6 text-gray-600" />
        </TooltipIconButton>
      </DialogTrigger>
      <DialogContent className="max-w-xl p-8 bg-white rounded-lg shadow-xl">
        <DialogHeader>
          <DialogTitle className="text-3xl font-light text-gray-800">
            Reflections
          </DialogTitle>
          <DialogDescription className="mt-2 text-md font-light text-gray-600">
            {isLoadingReflections ? (
              "Loading reflections..."
            ) : reflections?.content || reflections?.styleRules ? (
              "Current reflections generated by the assistant for content generation."
            ) : (
              <NoReflections handleGetReflections={handleGetReflections} />
            )}
          </DialogDescription>
        </DialogHeader>
        <div className="mt-6 max-h-[60vh] overflow-y-auto pr-4 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
          {isLoadingReflections ? (
            <div className="flex justify-center items-center h-32">
              <Loader className="h-8 w-8 animate-spin" />
            </div>
          ) : reflections?.content || reflections?.styleRules ? (
            <>
              {reflections.styleRules && (
                <div className="mb-6">
                  <h2 className="text-xl font-light text-gray-800 sticky top-0 bg-white py-2 mb-3">
                    Style Reflections:
                  </h2>
                  <ul className="list-disc list-inside space-y-2">
                    {reflections.styleRules.map((rule, index) => (
                      <li key={index} className="text-gray-600 font-light">
                        {rule}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              {reflections.content && (
                <div className="mb-6">
                  <h2 className="text-xl font-light text-gray-800 sticky top-0 bg-white py-2 mb-3">
                    Content Reflections:
                  </h2>
                  <ul className="list-disc list-inside space-y-2">
                    {reflections.content.map((rule, index) => (
                      <li key={index} className="text-gray-600 font-light">
                        {rule}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </>
          ) : null}
        </div>
        <div className="mt-6 flex justify-between">
          {reflections?.content || reflections?.styleRules ? (
            <ConfirmClearDialog handleDeleteReflections={handleDelete} />
          ) : null}
          <Button
            onClick={() => setOpen(false)}
            className="bg-black hover:bg-gray-800 text-white px-4 py-2 rounded shadow transition"
          >
            Close
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}
